<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
    <img id="akl">
    <script>
        /*
            元素的属性一共有两种：
                - 自带属性
                - 自定义属性
        */ 

        // 获取自带属性很简单，先获取这个元素然后 .属性名 就可以了，赋值也很简单，直接等于号就能赋值了
       document.querySelector('#akl').src = 'https://game.gtimg.cn/images/lol/act/a20220729starguardian/vp/aklvp01_03.png'

        // 你一定觉着自定义属性是不是也是直接 .属性名  就可以了？很遗憾不行。我们需要调用js给我们提供的方法,setAttribute、getAttribute、removeAttribute
        document.getElementById('box').setAttribute('team', 'RNG') 
        console.log(document.getElementById('box').getAttribute('team'));   
        document.getElementById('box').removeAttribute('team')

        // 但是后来程序员们在使用的时候发现了个问题，那就是有些时候，我们好像没法分辨出一个属性是自带的还是原生的，比如index，看上去好像是自带的，其实是我们自定义的。所以后来开发者们规定，将自定义属性都加上一个 'data-' 前缀作为区分。使用的方法自然也有了改变，开发者们给每个标签都添加了一个dataset属性，通过element.dataset.xxx = value即可实现自定义属性的添加与赋值，你输入的xxx，最终会被js解析为data-xxx最后放到节点上。
        //比如这个例子，box这个节点就被添加了一个data-team属性，值为RNG
        document.getElementById('box').dataset.team = 'RNG'
        console.log(document.getElementById('box'))
    </script>
</body>
</html>